<template>
  <!-- 浮力与物体形状的关系 -->
  <div>
    <!-- 实验界面 -->
    <div class="sy">
      <el-col :span="2" :offset="0">
        <h1 class="title animated pulse">
          浮<br />力<br />与<br />物<br />体<br />形<br />状
        </h1>
        <h1 class="title2 animated pulse">
          之<br />间<br />的<br />关<br />系
        </h1>
      </el-col>
      <!-- 水容器 -->
      <!-- <el-row> -->
      <!-- 淡水1 -->
      <el-col :span="4" :offset="4" class="freshwater_box1 animated bounceIn">
        <!-- 容器 -->
        <img src="../assets/pack.png" class="pack" />
        <!-- 水    -->
        <img
          src="../assets/water.png"
          alt="water"
          :class="[water, water1up]"
          ref="water"
        />
      </el-col>
      <!-- </el-row> -->

      <!-- 淡水2 -->
      <el-col :span="4" :offset="4" class="freshwater_box2 animated bounceIn">
        <!-- 容器 -->
        <img src="../assets/pack.png" class="pack" />
        <!-- 水    -->
        <img
          src="../assets/water.png"
          alt="water"
          :class="[water, water2up]"
          ref="water"
        />
      </el-col>

      <!-- 弹簧测力计 -->

      <!-- 放大镜 1  -->
    <div class="magnifier" v-show="ismagnifier1">
      <!-- 测力计本身 -->
      <div class="mg_box" style="width:5rem ; height:17rem; margin-left:15%; margin-top:-50%">
        <img src="../assets/mg.png" alt="mg" class="mg" />
        <!-- 显示读数的层 -->
        <div v-bind:class="[dsf, fthclj1zl]"></div>
      </div>
    </div>

      <!-- 弹簧测力计1 -->
      <div
        v-bind:class="[thclj_box1, thclj2_ifpz]"
        class="animated bounceInDown"
        ref="thclj"
      >
        <!-- 这里的 ref 可以不用？ -->
        <!-- 测力计本身 -->
        <div class="mg_box">
          <img src="../assets/mg.png" alt="mg" class="mg" />
          <!-- 显示读数的层 -->
          <div v-bind:class="[ds, thclj1zl]"></div>
        </div>
        <!-- 弹簧测力计 1 定位点 -->
        <div class="thclj_pot" ref="thclj1_pot"></div>
        <!-- 挂钩 -->
        <img src="../assets/line.png" alt="line" class="line" />
      </div>

      
    <!-- 放大镜 2  -->
    <div class="magnifier2" v-show="ismagnifier2">
      <!-- 测力计本身 -->
      <div class="mg_box" style="width:5rem ; height:17rem; margin-left:15%; margin-top:-50%">
        <img src="../assets/mg.png" alt="mg" class="mg" />
        <!-- 显示读数的层 -->
        <div v-bind:class="[dsf, fthclj2zl]"></div>
      </div>
    </div>

      <!-- 弹簧测力计 2 -->
      <div
        v-bind:class="[thclj_box2, thclj2_ifpz]"
        class="animated bounceInDown"
        ref="thclj"
      >
        <!-- 这里的 ref 可以不用？ -->
        <!-- 测力计本身 -->
        <div class="mg_box">
          <img src="../assets/mg.png" alt="mg" class="mg" />
          <!-- 显示读数的层 -->
          <div v-bind:class="[ds, thclj2zl]"></div>
        </div>
        <!-- 弹簧测力计 2 定位点 -->
        <div class="thclj_pot" ref="thclj2_pot"></div>
        <!-- 挂钩 -->
        <img src="../assets/line.png" alt="line" class="line" />
      </div>

      <!-- 砝码 -->

      <!-- 砝码 1 -->
      <div
        v-bind:class="[drag1, fm1ifpz]"
        class="animated bounceInLeft"
        v-drag
        @click="handleDragClick"
        ref="fm"
      >
        <!-- 砝码定位点 -->
        <div class="fm_pot" ref="fm1_pot"></div>
        <!-- 砝码图片 -->
        <img src="../assets/fm.png" alt="fm1" class="fm" />
      </div>

      <!-- 铝砝码 2 -->
      <div
        v-bind:class="[drag2, fm2ifpz]"
        class="animated bounceInLeft"
        v-drag
        @click="handleDragClick"
        ref="fm"
      >
        <!-- 砝码定位点 -->
        <div class="fm_pot" ref="fm2_pot"></div>
        <!-- 砝码图片 -->
        <img src="../assets/yfm.png" alt="fm" class="fm" />
      </div>

        <!-- 步骤条 -->
    <!-- <div class="progress"> -->
      <el-steps :space="150" :active="active" align-center finish-status="success" class="progress">
        <el-step title="已完成" process-status="process"></el-step>
        <el-step title="已完成"></el-step>
        <el-step title="已完成"></el-step>
        <el-step title="已完成"></el-step>
        <el-step :title="title" ref="step5"></el-step>
      </el-steps>
    <!-- </div> -->

      <!-- 答题 -->
      <div class="dt">
        <h6>实验记录</h6>
        <el-form ref="form" :model="sizeForm" size="mini">
          <el-form-item label="左边读数">
            <el-input v-model="sizeForm.leftds" class="ipt"></el-input>
          </el-form-item>
          <el-form-item label="右边读数">
            <el-input v-model="sizeForm.rightds" class="ipt"></el-input>
          </el-form-item>

          <el-form-item label="结论">
            <el-radio-group v-model="sizeForm.resource" size="medium">
              <el-radio
                border
                label="浮力的大小与物体的形状无关"
                class="chose"
              ></el-radio>
              <el-radio
                border
                label="浮力的大小与物体的形状有关"
                class="chose"
              ></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      drag1: "drag1",
      drag2: "drag2",

      thclj1_ifpz: "",
      thclj2_ifpz: "",

      fm1ifpz: "",
      fm2ifpz: "",

      thclj_box1: "thclj_box1",
      thclj_box2: "thclj_box2",

      thclj1isch: "false", // 判断是否重合
      thclj2isch: "false",

      thclj1zl: "",
      thclj2zl: "",

      ds: "ds",

      water: "water",
      water1up: "",
      water2up: "",

      sizeForm: {
        leftds: "",
        rightds: "",
        resource: "",
        desc: "",
      },

      active:4,
      title:"进行中",

      ismagnifier1:false,
        ismagnifier2:false,

        dsf:"dsf",

        fthclj1zl:"",
        fthclj2zl:"",
    };
  },

  // 自定义拖动指令
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var disx = e.pageX - el.offsetLeft;
        var disy = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + "px";
          el.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null;
        };
      };
    },
  },

  // 生命周期函数
  //    1 判断砝码和弹簧测力计是否挂上
  mounted() {
    //   使用元素
    let x = this.$refs.fm.offsetHeight;
    let waterHeight = this.$refs.water.offsetHeight;

    setTimeout(() => {
      this.isshow = false;
      this.issy_show = true;

      //  获取位置
      this.timer = setInterval(() => {
        // 获取砝码 1 定位点的位置
        let fm1_tp = this.$refs.fm1_pot.getBoundingClientRect().top;
        let fm1_le = this.$refs.fm1_pot.getBoundingClientRect().left;

        // 获取砝码 2 定位点的位置
        let fm2_tp = this.$refs.fm2_pot.getBoundingClientRect().top;
        let fm2_le = this.$refs.fm2_pot.getBoundingClientRect().left;

        // 获取弹簧测力计 1 定位点的位置
        let thclj1_tp = this.$refs.thclj1_pot.getBoundingClientRect().top;
        let thclj1_le = this.$refs.thclj1_pot.getBoundingClientRect().left;

        // 获取弹簧测力计 2 定位点的位置
        let thclj2_tp = this.$refs.thclj2_pot.getBoundingClientRect().top;
        let thclj2_le = this.$refs.thclj2_pot.getBoundingClientRect().left;

        // 判断砝码 1 与弹簧测力计 1 位置
        if (
          fm1_tp - thclj1_tp < 5 &&
          fm1_tp - thclj1_tp > -5 &&
          fm1_le - thclj1_le < 5 &&
          fm1_le - thclj1_le > -5
        ) {
          // console.log("1-1");

          // 如果判断重合，则不可移动
          this.fm1ifpz = "fm1ifpz";
          this.thclj1isch = true;
          // 放大镜显示
          this.ismagnifier1 = true;
          this.zl_ds1();
        }
        // 判断砝码 1 与弹簧测力计 2 位置
        if (
          fm1_tp - thclj2_tp < 5 &&
          fm1_tp - thclj2_tp > -5 &&
          fm1_le - thclj2_le < 5 &&
          fm1_le - thclj2_le > -5
        ) {
          // 如果判断重合，则不可移动
          // console.log("1-2");
          this.fm1ifpz = "fm1ifpz";
          this.thclj2isch = true;
           // 放大镜 2 显示
          this.ismagnifier2 = true;
          this.zl_ds2();
        }
        // 判断砝码 2 与弹簧测力计 1 位置
        if (
          fm2_tp - thclj1_tp < 5 &&
          fm2_tp - thclj1_tp > -5 &&
          fm2_le - thclj1_le < 5 &&
          fm2_le - thclj1_le > -5
        ) {
          // console.log("2-1");
          // 如果判断重合，则不可移动
          this.fm2ifpz = "fm2ifpz";
          this.thclj1isch = true;
          // 放大镜 1 显示
          this.ismagnifier1 = true;
          this.zl_ds1();
        }
        // 判断砝码 2 与弹簧测力计 2 位置
        if (
          fm2_tp - thclj2_tp < 5 &&
          fm2_tp - thclj2_tp > -5 &&
          fm2_le - thclj2_le < 5 &&
          fm2_le - thclj2_le > -5
        ) {
          // console.log("2-2");
          // 如果判断重合，则不可移动
          this.fm2ifpz = "fm2ifpz";
          this.thclj2isch = true;
          // 放大镜 2 显示
          this.ismagnifier2 = true;
          this.zl_ds2();
        }
      }, 1000);
    }, 2000);
  },

  methods: {
    onSubmit() {
      //  如果选择正确，则提示正确，并跳转窗口
      if (this.sizeForm.resource == "浮力的大小与物体的形状无关") {
        this.$notify({
          title: "正确",
          message: "恭喜你回答正确并完成所有实验",
          type: "success",
        });
        this.active = 5;
        this.title = "已完成";
        // this.$refs.step5.style.title = "已完成";
      } else {
        this.$notify.error({
          title: "错误",
          message: "回答错了，请在想想",
        });
      }
    },

    // 弹簧测力计 1 指定动画
    zl_ds1() {
      // 判断是否执行动画
      if (this.thclj1isch == true) {
        this.thclj1zl = "thclj1zl";
        this.fthclj1zl= 'fthclj1zl';
        this.water1up = "water1up";
      }
    },

    // 弹簧测力计 2 指定动画
    zl_ds2() {
      // 判断是否执行动画
      if (this.thclj2isch == true) {
        this.thclj2zl = "thclj2zl";
        this.fthclj2zl= 'fthclj2zl';
        this.water2up = "water2up";
      }
    },

    // 判断拖拽组件的状态
    handleDragClick(e) {
      // 判断拖拽组件的状态
      let isDrag = false;
      try {
        isDrag = e.target.getAttribute("ele-flag") === "true";
      } catch (e) {}
      if (isDrag) {
        return;
      }
      // 当推拽组件未在 拖动状态 执行点击事件
      // todo 下面是执行点击事件的代码
    },
  },
};
</script>

<style scoped>
/* 实验界面 */
.sy {
  width: 100%;
  height: 100vh;
}

/* 标题 */
.title {
  height: 18rem;
  pointer-events: none;
  user-select: none;
  margin: 0;
  animation-iteration-count: infinite;
  animation-duration: 2000ms;
  /* 反向动画 */
  animation-direction: alternate;
}
.title2 {
  height: 15rem;
  animation-iteration-count: infinite;
  animation-duration: 2300ms;
  /* 反向动画 */
  animation-direction: alternate;
}

/* 动态添加的样式 */
.fm1ifpz {
  pointer-events: none; /* 使元素不可被点击 */
}
.fm2ifpz {
  pointer-events: none; /* 使元素不可被点击 */
}

/* 水 */

/* 淡水容器1 */
.freshwater_box1 {
  position: relative;
  top: 22%;
  height: 14rem;
  overflow: hidden;
  pointer-events: none;
}
/* 淡水容器2 */
.freshwater_box2 {
  position: relative;
  top: 22%;
  height: 14rem;
  overflow: hidden;
  pointer-events: none;
}
/* 水效果 */
.pack {
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.water {
  position: absolute;
  left: 0%;
  top: 10%;
  width: 130%;
  height: 135%;
  z-index: -999;
  animation: rt 5s linear infinite;
  pointer-events: none;
}
/* 水质动画效果 */
@keyframes rt {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-20%);
  }
}

/* 水升起动画 */
.water1up {
  animation: up1 2s forwards;

  /* 让动画定格在最后一帧 */
  /* animation-fill-mode: forwards; */
}
@keyframes up1 {
  from {
    top: 10%;
  }
  to {
    top: 2%;
  }
}

.water2up {
  animation: up2 2s forwards;

  /* 让动画定格在最后一帧 */
  /* animation-fill-mode: forwards; */
}
@keyframes up2 {
  from {
    top: 10%;
  }
  to {
    top: 2%;
  }
}

/* 弹簧测力计样式 */

/* 弹簧测力计1 样式 */
.thclj_box1 {
  position: absolute;
  top: 5%;
  left: 30%;
  width: 3rem;
  height: 15rem;
  cursor: pointer;
  pointer-events: none;
}

/* 弹簧测力计2 样式 */
.thclj_box2 {
  position: absolute;
  top: 5%;
  left: 65%;
  width: 3rem;
  height: 15rem;
  cursor: pointer;
  pointer-events: none;
}

/* 弹簧测力计定位点 */
.thclj_pot {
  position: relative;
  top: 20%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  /* background-color: brown; */
  opacity: 0;   
  float: inherit;
  pointer-events: none;
}
.mg_box {
  position: relative;
  top: 0;
  left: 0;
  width: 3rem;
  height: 15rem;
  overflow: hidden;
  pointer-events: none;
}
.mg {
  width: 100%;
  height: 100%;
  pointer-events: none; /* 使元素不可被点击 */
}
.ds {
  position: relative;
  top: -415px;
  width: 100%;
  height: 100%;
  background-color: brown;
  z-index: -999;
  pointer-events: none;
}
.line {
  position: relative;
  top: -180px;
  left: 0%;
  height: 100%;
  width: 50%;
  pointer-events: none;
  z-index: -100;
  pointer-events: none;
}

/* 砝码样式 */

/* 砝码1 */
.drag1 {
  position: absolute;
  left: 10%;
  top: 70%;
  width: 4rem;
  height: 5rem;
  cursor: pointer;
  z-index: 999;
}

/* 砝码2 */
.drag2 {
  position: absolute;
  left: 20%;
  top: 70%;
  width: 6rem;
  height: 6rem;
  /* background-color: antiquewhite; */
  cursor: pointer;
  z-index: 999;
}
/* 砝码贴图样式 */
.fm {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 砝码定位点样式 */
.fm_pot {
  position: relative;
  top: 10%;
  left: 45%;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  /* background-color: brown; */
  opacity: 0; 
  float: inherit;
  pointer-events: none;
}

/* 读数动画 */
/* 弹簧测力计 1 读数的动画效果 */
.thclj1zl {
  animation: ds1 2s;

  /* 让动画定格在最后一帧 */
  animation-fill-mode: forwards;
}
@keyframes ds1 {
  0% {
    top: -415px;
  }
  100% {
    top: -380px;
  }
}
/* 弹簧测力计 2 读数的动画效果 */
.thclj2zl {
  animation: ds2 2s;

  /* 让动画定格在最后一帧 */
  animation-fill-mode: forwards;
}
@keyframes ds2 {
  0% {
    top: -415px;
  }
  100% {
    top: -380px;
  }
}

/* 答题区样式 */
.dt {
  width: 20rem;
  height: 22rem;
  float: right;
  margin-right: 2%;
  margin-top: 18%;
  border: beige solid 1px;
}
.ipt {
  width: 50%;
}
.chose {
  float: right;
  margin: 0;
}

/* 进度条样式 */
.progress{
  width: 24rem;
  height: 3rem;
  position: relative;
  top: 80%;
  left: -40%;
}

/* 放大镜 1 样式 */
.magnifier{
  position: absolute;
  top: 13%;
  left: 22%;
  width: 7rem;
  height: 7rem;
  border-radius: 7rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 1px #000000;
  overflow: hidden;
  z-index: -1000;
}
/* 放大镜 2 样式 */
.magnifier2{
position: absolute;
  top: 13%;
  left: 70%;
  width: 7rem;
  height: 7rem;
  border-radius: 7rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 1px #000000;
  overflow: hidden;
  z-index: -1000;
}

.dsf {
  position: relative;
  top: -469px;
  width: 100%;
  height: 100%;
  background-color: brown;
  z-index: -999;
  pointer-events: none;
}

/* 放大镜 1 读数动画 */
.fthclj1zl{
  animation: fds1 2s;
  /* 让动画定格在最后一帧 */
  animation-fill-mode: forwards;
}
@keyframes fds1 {
  0% {
    top: -469px;
  }
  100% {
    top: -429px;
  }
}
/* 放大镜 2 读数动画 */
.fthclj2zl{
  animation: fds2 2s;
  /* 让动画定格在最后一帧 */
  animation-fill-mode: forwards;
}
@keyframes fds2 {
  0% {
    top: -469px;
  }
  100% {
    top: -429px;
  }
}
</style>